<template>
	<div style="background-color: black;" class="hello">
		<h1>{{ msg }}</h1>
		<div>
			<b-navbar toggleable="lg" type="dark" variant="info">
				<b-navbar-brand href="#">爱奇艺</b-navbar-brand>

				<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

				<b-collapse id="nav-collapse" is-nav>
					<b-navbar-nav>
						<b-nav-item href="https://www.iqiyi.com/dianshiju/">电视剧</b-nav-item>
						<b-nav-item href="https://www.iqiyi.com/dianying/">电影</b-nav-item>
						<b-nav-item-dropdown text="全部" right>
							<b-dropdown-item href="#">电影</b-dropdown-item>
							<b-dropdown-item href="#">动漫</b-dropdown-item>
							<b-dropdown-item href="#">少儿</b-dropdown-item>
							<b-dropdown-item href="#">综艺</b-dropdown-item>
						</b-nav-item-dropdown>
					</b-navbar-nav>

					<!-- Right aligned nav items -->
					<b-navbar-nav class="ml-auto">
						<b-nav-form>

							<b-form-input size="sm" class="mr-sm-2" placeholder="乐队的夏天"></b-form-input>

							<b-button size="sm" class="my-2 my-sm-0" type="submit">
								<b-icon-lightning-fill></b-icon-lightning-fill>vip
							</b-button>
						</b-nav-form>
						<b-nav-item-dropdown right>
							<!-- Using 'button-content' slot -->
							<template v-slot:button-content>
								<em> </em>
								<b-icon-cloud-upload-fill></b-icon-cloud-upload-fill>

							</template>
							<b-dropdown-item href="#">
								<b-icon-arrow-bar-up></b-icon-arrow-bar-up>发布作品
							</b-dropdown-item>
							<b-dropdown-item href="#">
								<b-icon-sliders></b-icon-sliders>作品管理
							</b-dropdown-item>
							<b-dropdown-item href="#">
								<b-icon-suit-heart-fill></b-icon-suit-heart-fill>爱奇艺账号
							</b-dropdown-item>
							<b-dropdown-item href="#">
								<b-icon-file-person></b-icon-file-person>我的空间
							</b-dropdown-item>
						</b-nav-item-dropdown>
					</b-navbar-nav>
				</b-collapse>
			</b-navbar>
		</div>
		<div>
			<b-carousel id="carousel-fade" style="text-shadow: 0px 0px 2px #000" fade indicators img-width="1024" img-height="480">
				<b-carousel-slide caption="三人行" img-src="../../tupian/lunbo.jpg"></b-carousel-slide>
				<b-carousel-slide caption="VIP" img-src="../../tupian/luboyi.jpg"></b-carousel-slide>
				<b-carousel-slide caption="爱奇艺" img-src="../../tupian/lunbo2.jpg"></b-carousel-slide>
			</b-carousel>
		</div>

		<div>
			<b-card style="background-color: black ;" no-body>
				<b-tabs card>
					<b-tab title="内地" active>
						<b-card-text>
							<b-container fluid class="p-4 bg-dark">
								<b-row>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidiyi.webp" alt="Image 1"></b-img>

									</b-col>
									<b-button v-b-popover.hover.top="'类型： 悬疑奇幻内地主演： 朱一龙毛晓彤胡军陈楚河陈明昊黄俊捷黄梦莹谢君豪杨迪瞿颖刘畅（演员）娃尔乔振宇打斗中，在雷声的驱动下，莲花神器打开，吴邪不慎跌入金水棺材，却意外治好了他的病。焦老板挟持所有人，逼吴邪说出这里的秘'"
									 title="vip">
										沙海之极<br>海听雷第二季
									</b-button>

									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidier.webp" alt="Image 2"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'类型:普通话内地  主演:冯绍峰袁姗姗乔振宇   内容:潘之琳公磊董晴李洪涛一筹莫展之际，梅兆和先让洪雨桥打了白条，先把钱领走了。但是白条需要邝铭筹签字，而邝铭筹明确表示不能搞不正之风，百般无.'"
									 title="免费">
										创业年代
									</b-button>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidisan.webp" alt="Image 3"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'江君在乔娜眼神中感受到了先保命要紧，于是借故离开。根据徐莉的分析，果然第二天江君就开始被乔娜刁难，江君于是刻意的开始.'" title="vip">
										沉默的真相
									</b-button>

								</b-row>

							</b-container>

						</b-card-text>

					</b-tab>
					<b-tab title="自制剧">
						<b-card-text>
							<b-container fluid class="p-4 bg-dark">
								<b-row>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidiyi.webp" alt="Image 1"></b-img>

									</b-col>
									<b-button v-b-popover.hover.top="'类型： 悬疑奇幻内地主演： 朱一龙毛晓彤胡军陈楚河陈明昊黄俊捷黄梦莹谢君豪杨迪瞿颖刘畅（演员）娃尔乔振宇打斗中，在雷声的驱动下，莲花神器打开，吴邪不慎跌入金水棺材，却意外治好了他的病。焦老板挟持所有人，逼吴邪说出这里的秘'"
									 title="vip">
										沙海之极<br>海听雷第二季
									</b-button>

									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidier.webp" alt="Image 2"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'类型:普通话内地  主演:冯绍峰袁姗姗乔振宇   内容:潘之琳公磊董晴李洪涛一筹莫展之际，梅兆和先让洪雨桥打了白条，先把钱领走了。但是白条需要邝铭筹签字，而邝铭筹明确表示不能搞不正之风，百般无.'"
									 title="免费">
										创业年代
									</b-button>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidisan.webp" alt="Image 3"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'江君在乔娜眼神中感受到了先保命要紧，于是借故离开。根据徐莉的分析，果然第二天江君就开始被乔娜刁难，江君于是刻意的开始.'" title="vip">
										沉默的真相
									</b-button>

								</b-row>
							</b-container>
						</b-card-text>
					</b-tab>
					<b-tab title="网络剧">
						<b-card-text>
							<b-container fluid class="p-4 bg-dark">
								<b-row>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidiyi.webp" alt="Image 1"></b-img>

									</b-col>
									<b-button v-b-popover.hover.top="'类型： 悬疑奇幻内地主演： 朱一龙毛晓彤胡军陈楚河陈明昊黄俊捷黄梦莹谢君豪杨迪瞿颖刘畅（演员）娃尔乔振宇打斗中，在雷声的驱动下，莲花神器打开，吴邪不慎跌入金水棺材，却意外治好了他的病。焦老板挟持所有人，逼吴邪说出这里的秘'"
									 title="vip">
										沙海之极<br>海听雷第二季
									</b-button>

									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidier.webp" alt="Image 2"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'类型:普通话内地  主演:冯绍峰袁姗姗乔振宇   内容:潘之琳公磊董晴李洪涛一筹莫展之际，梅兆和先让洪雨桥打了白条，先把钱领走了。但是白条需要邝铭筹签字，而邝铭筹明确表示不能搞不正之风，百般无.'"
									 title="免费">
										创业年代
									</b-button>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidisan.webp" alt="Image 3"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'江君在乔娜眼神中感受到了先保命要紧，于是借故离开。根据徐莉的分析，果然第二天江君就开始被乔娜刁难，江君于是刻意的开始.'" title="vip">
										沉默的真相
									</b-button>
								</b-row>
							</b-container>
						</b-card-text>
					</b-tab>
					<b-tab title="迷雾剧">
						<b-card-text>
							<b-container fluid class="p-4 bg-dark">
								<b-row>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidiyi.webp" alt="Image 1"></b-img>

									</b-col>
									<b-button v-b-popover.hover.top="'类型： 悬疑奇幻内地主演： 朱一龙毛晓彤胡军陈楚河陈明昊黄俊捷黄梦莹谢君豪杨迪瞿颖刘畅（演员）娃尔乔振宇打斗中，在雷声的驱动下，莲花神器打开，吴邪不慎跌入金水棺材，却意外治好了他的病。焦老板挟持所有人，逼吴邪说出这里的秘'"
									 title="vip">
										沙海之极<br>海听雷第二季
									</b-button>

									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidier.webp" alt="Image 2"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'类型:普通话内地  主演:冯绍峰袁姗姗乔振宇   内容:潘之琳公磊董晴李洪涛一筹莫展之际，梅兆和先让洪雨桥打了白条，先把钱领走了。但是白条需要邝铭筹签字，而邝铭筹明确表示不能搞不正之风，百般无.'"
									 title="免费">
										创业年代
									</b-button>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidisan.webp" alt="Image 3"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'江君在乔娜眼神中感受到了先保命要紧，于是借故离开。根据徐莉的分析，果然第二天江君就开始被乔娜刁难，江君于是刻意的开始.'" title="vip">
										沉默的真相
									</b-button>
								</b-row>
							</b-container>
						</b-card-text>
					</b-tab>
					<b-tab title="爱青春剧场">
						<b-card-text>
							<b-container fluid class="p-4 bg-dark">
								<b-row>
									<b-col>

										<b-img thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Image 1">
										</b-img>

									</b-col>
									<b-button v-b-popover.hover.top="'I am popover directive content!'" title="Popover Title">
										Hover Me
									</b-button>

									<b-col>
										<b-img thumbnail fluid src="https://picsum.photos/250/250/?image=58" alt="Image 2"></b-img>
									</b-col>

									<b-button v-b-popover.hover.top="'I am popover directive content!'" title="Popover Title">
										Hover Me
									</b-button>
									<b-col>
										<b-img thumbnail fluid src="https://picsum.photos/250/250/?image=59" alt="Image 3"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'I am popover directive content!'" title="Popover Title">
										Hover Me
									</b-button>
								</b-row>
							</b-container>
						</b-card-text>
					</b-tab>

				</b-tabs>
			</b-card>
		</div>
		<div>
			<b-card style="background-color: black ;" no-body>
				<b-tabs card>
					<b-tab title="电影" active>
						<b-card-text>
							<b-container fluid class="p-4 bg-dark">
								<b-row>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/diansisi.jpg" alt="Image 1"></b-img>

									</b-col>
									<b-button v-b-popover.hover.top="'类型： 爱情喜剧科幻主演： 包贝尔辛芷蕾魏翔 对生活毫无激情的导游方元(包贝尔饰)在生日当天，邂逅了陌生的潇洒女孩(辛芷蕾饰)，两人机缘巧合度过了开心的庆生夜'"
									 title="vip">
										我的机器人女友
									</b-button>

									<b-col>
										<b-img thumbnail fluid src="../../tupian/dianerer.jpg" alt="Image 2"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'类型： 英语美国悬疑主演： Mary J. BligeNat Wolff大卫·札亚斯阿尼卡·诺尼·罗斯大卫·沃肖夫斯基讲述洛杉矶警察局的几名警官被一种恶毒的情绪所困扰，与两个白人警察杀害一名黑人青年有关。所有这些人都被一个身体摄像机拍.'"
									 title="免费">
										致命摄影机
									</b-button>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/diansansan.jpg" alt="Image 3"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'类型： 爱情普通话华语主演： 马思纯钟楚曦黄景瑜故事发生在90年代的小城市。云荞（马思纯饰）想要“活成一部电影”；李麦（钟楚曦饰）有看得见希望的未来；吴风（黄景瑜）'"
									 title="vip">
										荞麦疯长
									</b-button>

								</b-row>

							</b-container>

						</b-card-text>

					</b-tab>
					<b-tab title="爱奇艺爱电影">
						<b-card-text>
							<b-container fluid class="p-4 bg-dark">
								<b-row>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/dianyiyi.jpg" alt="Image 1"></b-img>

									</b-col>
									<b-button v-b-popover.hover.top="'门神 类型： 喜剧奇幻普通话主演： 陈锡稳郎峰王泽宗大唐年间，天下初定，世间却仍有妖孽作乱。 泾河龙王被斩，水族怨念横生，欲要大唐生灵涂炭以报灭主之仇；东瀛妖师为夺至宝.'"
									 title="vip">
										门神
									</b-button>

									<b-col>
										<b-img thumbnail fluid src="../../tupian/dianwuwu.jpg" alt="Image 2"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'类型： 独播喜剧普通话主演： 郭达曹颖山村神仙村交通不便，是远近闻名的贫困村。第一书记余丹阳驻村之后在山下重新规划，腾空老村发展特色民俗旅游，大部分村民为..'"
									 title="独播">
										毛驴上树2<br>倔驴搬家
									</b-button>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/dianliuliu.jpg" alt="Image 3"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'类型： 爱情奇幻普通话主演： 余文乐春夏惠英红涂们王雨甜王真儿乔杉杨迪影片讲述了季末从小就因为能看见“怪物”而被视作异类，直到有一天邂逅“怪物猎人”猛哥，她才发现原来世界上真的有“怪物”'"
									 title="vip">
										怪物先生
									</b-button>

								</b-row>
							</b-container>
						</b-card-text>
					</b-tab>
					<b-tab title="爱奇艺独播专区">
						<b-card-text>
							<b-container fluid class="p-4 bg-dark">
								<b-row>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidiyi.webp" alt="Image 1"></b-img>

									</b-col>
									<b-button v-b-popover.hover.top="'类型： 悬疑奇幻内地主演： 朱一龙毛晓彤胡军陈楚河陈明昊黄俊捷黄梦莹谢君豪杨迪瞿颖刘畅（演员）娃尔乔振宇打斗中，在雷声的驱动下，莲花神器打开，吴邪不慎跌入金水棺材，却意外治好了他的病。焦老板挟持所有人，逼吴邪说出这里的秘'"
									 title="vip">
										沙海之极<br>海听雷第二季
									</b-button>

									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidier.webp" alt="Image 2"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'类型:普通话内地  主演:冯绍峰袁姗姗乔振宇   内容:潘之琳公磊董晴李洪涛一筹莫展之际，梅兆和先让洪雨桥打了白条，先把钱领走了。但是白条需要邝铭筹签字，而邝铭筹明确表示不能搞不正之风，百般无.'"
									 title="免费">
										创业年代
									</b-button>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidisan.webp" alt="Image 3"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'江君在乔娜眼神中感受到了先保命要紧，于是借故离开。根据徐莉的分析，果然第二天江君就开始被乔娜刁难，江君于是刻意的开始.'" title="vip">
										沉默的真相
									</b-button>
								</b-row>
							</b-container>
						</b-card-text>
					</b-tab>
					<b-tab title="爱奇艺网络电影">
						<b-card-text>
							<b-container fluid class="p-4 bg-dark">
								<b-row>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidiyi.webp" alt="Image 1"></b-img>

									</b-col>
									<b-button v-b-popover.hover.top="'类型： 悬疑奇幻内地主演： 朱一龙毛晓彤胡军陈楚河陈明昊黄俊捷黄梦莹谢君豪杨迪瞿颖刘畅（演员）娃尔乔振宇打斗中，在雷声的驱动下，莲花神器打开，吴邪不慎跌入金水棺材，却意外治好了他的病。焦老板挟持所有人，逼吴邪说出这里的秘'"
									 title="vip">
										沙海之极<br>海听雷第二季
									</b-button>

									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidier.webp" alt="Image 2"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'类型:普通话内地  主演:冯绍峰袁姗姗乔振宇   内容:潘之琳公磊董晴李洪涛一筹莫展之际，梅兆和先让洪雨桥打了白条，先把钱领走了。但是白条需要邝铭筹签字，而邝铭筹明确表示不能搞不正之风，百般无.'"
									 title="免费">
										创业年代
									</b-button>
									<b-col>
										<b-img thumbnail fluid src="../../tupian/neidisan.webp" alt="Image 3"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'江君在乔娜眼神中感受到了先保命要紧，于是借故离开。根据徐莉的分析，果然第二天江君就开始被乔娜刁难，江君于是刻意的开始.'" title="vip">
										沉默的真相
									</b-button>
								</b-row>
							</b-container>
						</b-card-text>
					</b-tab>
					<b-tab title="系类电影镜像">
						<b-card-text>
							<b-container fluid class="p-4 bg-dark">
								<b-row>
									<b-col>

										<b-img thumbnail fluid src="https://picsum.photos/250/250/?image=58" alt="Image 1">
										</b-img>

									</b-col>
									<b-button v-b-popover.hover.top="'I am popover directive content!'" title="Popover Title">
										Hover Me
									</b-button>

									<b-col>
										<b-img thumbnail fluid src="https://picsum.photos/250/250/?image=58" alt="Image 2"></b-img>
									</b-col>

									<b-button v-b-popover.hover.top="'I am popover directive content!'" title="Popover Title">
										Hover Me
									</b-button>
									<b-col>
										<b-img thumbnail fluid src="https://picsum.photos/250/250/?image=59" alt="Image 3"></b-img>
									</b-col>
									<b-button v-b-popover.hover.top="'I am popover directive content!'" title="Popover Title">
										Hover Me
									</b-button>
								</b-row>
							</b-container>
						</b-card-text>
					</b-tab>

				</b-tabs>
			</b-card>
		</div>
		<div>
			<div>
				<h4>综艺</h4>
				<b-card-group deck>
					<b-card img-src="../../tupian/huiyuan.jpg" img-alt="Card image" img-top style="background-color: #2C3E50;">
						<b-card-text>
							<p style="color: azure;">虞书欣沙溢现场对戏笑翻 安崎许佳琪使出葵花点穴手</p>
						</b-card-text>
					</b-card>

					<b-card img-src="../../tupian/huiyuan2.jpg" img-alt="Card image" img-bottom style="background-color: #2C3E50;">
						<b-card-text>
							<p style="color: azure;">
								极限挑战宝藏行<br>
								类型： 旅游搞笑普通话<br>
								嘉宾： 王迅岳云鹏虞书欣任嘉伦魏大勋刘宇宁俞灏明<br>
								亮点： 任嘉伦表演在线劈叉</p>
						</b-card-text>
					</b-card>
				</b-card-group>
			</div>
			<div>
				<p style="color: aqua; font-size: 50px;"> 动漫更新</p>
			</div>
			<div>
				<b-card-group deck>
					<b-card title="精灵梦叶罗丽第八季" img-src="../../tupian/dongman.jpg" img-alt="Image" img-top style=" color: aqua; background-color: #2C3E50;">
						<b-card-text>
							<p style="color: azure;">《精灵梦叶罗丽第八季》是一部国产3D动漫主要人物有王默、罗丽、陈思思、孔雀、建鹏、亮彩、舒言、茉莉、莫纱、荒石、齐娜、菲灵、高泰明、白光莹、水王子、冰公主、女王曼多拉等统治着叶罗丽仙境，因为人类大肆的破坏自然环境，使其严重影响到了仙境的存亡与仙子的安危。曼多拉认为人类都是自私自利爱破坏，不相信人类会自觉变好保护环境，所以想统治人类世界，将人类变成她的奴隶，重新治理被人类严重破坏的自然环境。而辛灵仙子则认为人类会自己觉悟拯救环境，所以带领着勇敢的叶罗丽战士，与曼多拉女王作斗争。共26集分为三个篇章，浮云楼，宝石盒子，四时钟</p>
						</b-card-text>
						<template v-slot:footer>
							<small class="text-muted">AiQiYi</small>
						</template>
					</b-card>

					<b-card title="完美世界" img-src="../../tupian/dongman2.jpg" img-alt="Image" img-top style=" color: aqua; background-color: #2C3E50;">
						<b-card-text>
							<p style="color: azure;"> 完美世界：第1季 热度 2080前往动漫热度风云榜 2020 动漫 中国大陆
								漫画改编一粒尘可填海，一根草斩尽日月星辰，弹指间天翻地覆。群雄并起，万族林立，诸圣争霸，乱天动地；问苍茫大地，谁主沉浮？一个少年从大荒中走出，一切从这里开始...</p>
						</b-card-text>
						<template v-slot:footer>
							<small class="text-muted">AiQiYi</small>
						</template>
					</b-card>

					<b-card title="Re从零开始的异世界" img-src="../../tupian/dongmansan.png" img-alt="Image" img-top style="color: aqua; background-color: #2C3E50;">
						<b-card-text>
							<p style="color: azure;">
								类型：动画作品
								导演：渡边政治
								简介：从零开始的异世界生活一般指Re：从零开始的异世界生活。电视动画《Re：从零开始的异世界生活》改编自日本轻小说家长月达平原.
							</p>
						</b-card-text>
						<template v-slot:footer>
							<small class="text-muted">AiQiYi</small>
						</template>
					</b-card>
				</b-card-group>
			</div>
		</div>
		<div style=" padding-top: 20px;">
			<b-button v-b-toggle.sidebar-variant>更多影视</b-button>
		</div>
<!-- 		<div style="padding-left: 1300px; padding-top: -10px;">
			<b-button v-b-modal.modal-1>请提交你的观影满意度</b-button>

			<b-modal id="modal-1" title="对本次的使用满意度">
				<b-form-rating v-model="value"></b-form-rating>
			</b-modal>
		</div> -->
		<b-sidebar id="sidebar-variant" title="爱奇艺" bg-variant="dark" text-variant="light" shadow>
			<b-input-group>
				<template v-slot:prepend>
					<b-input-group-text>搜索</b-input-group-text>
				</template>
				<b-form-input></b-form-input>

				<template v-slot:append>
					<b-dropdown text="历史记录" variant="success">
						<b-dropdown-item>全职高手</b-dropdown-item>
						<b-dropdown-item>历师</b-dropdown-item>
						<b-dropdown-item>妖精的尾巴</b-dropdown-item>
						<b-dropdown-item>......</b-dropdown-item>
					</b-dropdown>
				</template>
			</b-input-group>

			<div class="px-3 py-2">

				<b-img src="../../tupian/gengduo.webp" fluid thumbnail></b-img>
				<p>三嫁惹君心</p>

				<b-img src="../../tupian/gengduo2.webp" fluid thumbnail></b-img>
				<p>毛驴上树2</p>

				<b-img src="../../tupian/gengduo3.webp" fluid thumbnail></b-img>
				<p>怪物先生</p>

				<b-img src="../../tupian/gengduosi.webp" fluid thumbnail></b-img>
				<p>我的机器人女友</p>
				<br>
				<p>......</p>

			</div>

		</b-sidebar>
	</div>
	

	</div>
</template>

<script>
	export default {

		name: 'HelloWorld',
		props: {
			msg: String
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->


<style scoped>

</style>
